<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          <xsl:value-of select="/rss/channel/title"/>
          - RSS Feed
        </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
          body {
          font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto
          Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
          font-size: 12px;
          color: rgba(0, 0, 0, 0.80);
          background: rgba(0, 0, 0, 0.03);
          padding: 16px;
          line-height: 170%;
          }

          h1 {}

          h2, p, a {
          line-height: 170%;
          }
          a, a:link, a:visited {
            color: #2C2B3D;
            text-decoration: none;
            font-weight: bolder;
          }
          a:hover {
            color: #19B7FA;
          opacity: 0.7;
          }
          img {
            width: 100%;
          }
          .container {
          max-width: 800px;
          min-height: 600px;
          margin: 0 auto;
          background: #fff;
          padding: 30px;
          border-radius: 8px;
          box-shadow: 0 2px 3px fade(black, 10%);
          border: 1px solid rgba(0, 0, 0, 0.10);
          }
          .podcast-image {
          margin-bottom: 20px;
          margin-right: 20px;
          }
          .podcast-author {
          color: rgba(0, 0, 0, 0.60);
          }

          .podcast-description {
          }
          .podcast-image img {
          width: 200px;
          height: auto;
          border-radius: 4px;
          border: 1px solid rgba(0, 0, 0, 0.10);
          -webkit-box-shadow: rgba(0,0,0,0.1) 0 0 20px;
          -moz-box-shadow: rgba(0,0,0,0.1) 0 0 20px;
          box-shadow: rgba(0,0,0,0.1) 0 0 20px;
          }
          .podcast-header {
          margin-bottom: 20px;
          }
          .podcast-header-image-title {
            display: flex;
          }
          .category-container {
            margin-bottom: 16px;
            font-size: 12px;
          }

          .category-item {
            padding: 4px;
            border: 1px solid gray;
            margin: 4px;
            border-radius: 4px;
            background-color: gray;
            color: white;
          }
          .item {
          clear: both;
          border-top: 1px solid rgba(0, 0, 0, 0.10);
          padding: 24px 0;
          }
          audio {
          width: 100%;
          border-radius: 4px;
          }
          audio:focus {
          outline: none;
          }
          .episode-image img {
          width: 100px;
          height: auto;
          margin: 0 30px 15px 0;
          border-radius: 5px;
          }
          .episode-time {
          font-size: 12px;
          color: #8E8E8E;
          margin-bottom: 1em;
          }
          .view-website-link {
          text-align: left;
          }
          .pagination-div {
            display: flex;
            justify-content: center;
            border-top: 1px solid rgba(0, 0, 0, 0.10);
            padding-top: 40px;
          }
          .view-pagination-link {
            text-align: center;
            padding-left: 16px;
            padding-right: 16px;
            border: solid 1px;
            border-radius: 4px;
            margin-left: 8px;
            margin-right: 8px;
          }

          .icon-arrow-left:before {
            content: "←";
          }

          .icon-arrow-right:before {
            content: "→";
          }

          .footer {
            font-size: 12px;
            color: gray;
            text-align: center;
            margin-top: 80px;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="podcast-header">
            <div class="podcast-header-image-title">
              <div>
                <xsl:if test="/rss/channel/image">
                  <div class="podcast-image">
                    <a>
                      <xsl:attribute name="href">
                        <xsl:value-of select="/rss/channel/image/link"/>
                      </xsl:attribute>
                      <img>
                      <xsl:attribute name="src">
                        <xsl:value-of select="/rss/channel/image/url"/>
                      </xsl:attribute>
                      <xsl:attribute name="title">
                        <xsl:value-of select="/rss/channel/image/title"/>
                      </xsl:attribute>
                      </img>
                    </a>
                  </div>
                </xsl:if>
              </div>
              <div>
                <h1>
                  <xsl:value-of select="/rss/channel/title"/>
                </h1>
                <xsl:if test="/rss/channel/itunes:author">
                  <p>
                    By
                    <span class="podcast-author">
                    <xsl:value-of select="/rss/channel/itunes:author"/>
                  </span>
                  </p>
                </xsl:if>
                <xsl:if test="/rss/channel/itunes:category">
                  <div class="category-container">
                    Categories:
                    <xsl:for-each select="/rss/channel/itunes:category">
                      <span class="category-item"><xsl:value-of select="@text"/></span>
                      <xsl:if test="itunes:category/@text">
                        <span class="category-item"><xsl:value-of select="itunes:category/@text"/></span>
                      </xsl:if>
                    </xsl:for-each>
                  </div>
                </xsl:if>
                <xsl:for-each select="/rss/channel/link[not(@rel)]">
                  <xsl:if test="self::node()">
                    <p class="view-website-link">
                      <a>
                        <xsl:attribute name="href">
                          <xsl:value-of select="self::node()"/>
                        </xsl:attribute>
                        <xsl:attribute name="target">_blank</xsl:attribute>
                        Website &#x2192;
                      </a>
                    </p>
                  </xsl:if>
                </xsl:for-each>
              </div>
            </div>
            <div class="podcast-description">
              <xsl:value-of select="/rss/channel/description" disable-output-escaping="yes"/>
            </div>
          </div>
          <xsl:for-each select="/rss/channel/item">
            <div class="item">
              <h2>
                <a>
                  <xsl:attribute name="href">
                    <xsl:value-of select="link"/>
                  </xsl:attribute>
                  <xsl:attribute name="target">_blank</xsl:attribute>
                  <xsl:value-of select="title"/>
                  <span class="icon-arrow-right"></span>
                </a>
              </h2>
              <div class="episode-time">
                <span>
                  <xsl:value-of select="pubDate"/>
                </span>
                <xsl:if test="itunes:duration">
                &#x02022;
                <span>
                  <xsl:value-of select="itunes:duration"/>
                </span>
                </xsl:if>
              </div>
              <xsl:if test="description">
                <div>
                  <xsl:value-of select="description" disable-output-escaping="yes"/>
                </div>
              </xsl:if>

              <xsl:choose>
                <xsl:when test="starts-with(enclosure/@type, 'audio')">
                  <audio controls="true" preload="none">
                    <xsl:attribute name="src">
                      <xsl:value-of select="enclosure/@url"/>
                    </xsl:attribute>
                  </audio>
                </xsl:when>
                <xsl:when test="starts-with(enclosure/@type, 'text')">
                  <a>
                    <xsl:attribute name="href">
                      <xsl:value-of select="enclosure/@url"/>
                    </xsl:attribute>
                    View
                    <span class="icon-arrow-right"></span>
                  </a>
                </xsl:when>
                <xsl:otherwise>
                  <a>
                    <xsl:attribute name="href">
                      <xsl:value-of select="enclosure/@url"/>
                    </xsl:attribute>
                    Download
                    <span class="icon-arrow-right"></span>
                  </a>
                </xsl:otherwise>
              </xsl:choose>
            </div>
          </xsl:for-each>

          <div class="pagination-div">
            <xsl:for-each select="/rss/channel/link[@rel]">
              <xsl:if test="@rel='prev'">
              <div class="view-pagination-link">
                <a>
                  <xsl:attribute name="href">
                    <xsl:value-of select="@href"/>
                  </xsl:attribute>
                  <span class="icon-arrow-left"></span> Prev
                </a>
              </div>
              </xsl:if>
            </xsl:for-each>
            <xsl:for-each select="/rss/channel/link[@rel]">
              <xsl:if test="@rel='next'">
              <div class="view-pagination-link">
                <a>
                  <xsl:attribute name="href">
                    <xsl:value-of select="@href"/>
                  </xsl:attribute>
                  Next <span class="icon-arrow-right"></span>
                </a>
              </div>
              </xsl:if>
            </xsl:for-each>
          </div>
        </div>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>
